<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
	<!--	<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>-->
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				margin:0;
				padding: 0;
			}
			body{
				background: url(../img/login_bg2.jpg) no-repeat;
				background-size: 100% 100%;
			}
			.login-logo{
				width:100%;
				height:44px;
				line-height: 44px;
				text-align: center;
			}
			.login-logo img{
				position: relative;
				top:10px;
			}
			#login-form{
				margin-top: 40px;
				padding: 15px;
				background: rgba(0,0,0,0);
				font-size: 16px;
			}
			.mui-input-group:after{
				background: rgba(0,0,0,0);
			}
			.mui-input-group:before{
				background:rgba(0,0,0,0);
			}
			
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				width: 75%;
			}
			.login-logo h2{
				color: #4f77a8;
				letter-spacing: 2px;
			}
			.login-logo h4{
				color: #4f77a8;
				letter-spacing: 2px;
				margin-left: 200px;
			}
			input::-webkit-input-placeholder{
	            color:#999999;
	            font-size: 16px;
	        }
	        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
	            color:#999999;
	            font-size: 16px;
	        }
	        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
	            color:#999999;
	            font-size: 16px;
	        }
	        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
	            color:#999999;
	            font-size: 16px;
	        }
	        .mui-content{
	        	padding-top: 120px;
	        	background: rgba(0,0,0,0);
	        }
	        .mui-input-group .mui-input-row:after{
	        	background:#666666;
	        }
	        .mui-content-padded{
	        	margin: 10px 0px;
	        	padding: 2px 0;
	        	padding-left:15px;
	        }
	       .mui-btn-block{
	       	padding: 0px;
	       	background: #4f77a8;
	       	color: #ffffff;
	       }
	       input#password{
	       	background: rgba(0,0,0,0)!important;
	       }

	      /*语音样式*/
			 /*.mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{
				font-size: 20px;
				position: absolute;
				z-index: 1;
				right: 0;
				width: 38px;
				height: 55px;
				line-height: 55px;
				text-align: center;
				color: #999;
			}



            .blackBoxSpeak {
                width: 176px;
                height: 176px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
                url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

                background: rgba(0, 0, 0, .7);
                display: none;
                border-radius: 12px;
            }

            .blackBoxSpeakConent {
                font: 14.4px '微软雅黑 Light';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 12px;
                display: block;
                text-align: center;
                width: 90%;
                padding: 8px 0;
                margin: auto;
                color: #ffffff;
                font-weight: 200;
                border-radius: 4px;
            }

            .blackBoxPause {
                width: 176px;
                height: 176px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
                url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

                background: rgba(0, 0, 0, .7);
                display: none;
                border-radius: 12px;
            }

            .blackBoxPauseContent {
                font: 14.4px '微软雅黑 Light';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 12px;
                display: block;
                text-align: center;
                width: 90%;
                padding: 8px 0;
                margin: auto;
                color: #ffffff;
                font-weight: 200;
                border-radius: 4px;
            }
			@keyframes yuying{
			    0%{
			        height: 0%;
			    }
			    20%{
			        height: 50%;
			    }
			    50%{
			        height: 90%;
			    }
			    80%{
			        height: 50%;
			    }
			    100%{
			        height: 0%;
			    }
			}    

			.dialog-container{
			    width: 60px;
			    height: 25px;
			    background: #efefef;
			    border: 1px solid #0094de;
			    border-radius: 5px;
			    display: inline-flex;
			    justify-content: center;
			    align-items: center;
			    position: absolute;top:5px;left:70px;
			}
			.dialog-container .audio-animation{
			    width: 30px;
			    height: 20px;
			}
			.audioPlay #one{
			    animation:yuying 0.6s infinite 0.15s;
			   -webkit-animation:yuying 0.6s infinite 0.15s;
			}
			.audioPlay #two{
			    animation:yuying 0.6s infinite 0.3s;
			   -webkit-animation:yuying 0.6s infinite 0.3s;
			}
			.audioPlay #three{
			    animation:yuying 0.6s infinite 0.45s;
			   -webkit-animation:yuying 0.6s infinite 0.45s;
			}
			.audioPlay #four{
			    animation:yuying 0.6s infinite 0.6s;
			   -webkit-animation:yuying 0.6s infinite 0.6s;
			}

			#one,#two,#three,#four{
			    width:2px;
			    border-radius: 50px;
			    background-color: #0094de;
			    vertical-align: middle;
			    display: inline-block;
			}
			#one{
			    margin-left: 1px;
			    height: 50%;
			}
			#two{
			    height: 90%;
			}
			#three{
			    height: 70%;
			}
			#four{
			    height: 40%;
			}*/
			.mui-input-group .mui-input-row{
				height: 55px;
			}
			.mui-input-row label{
				display: inline-block;
			    height: 55px;
			    padding:0 0 0 15px;
				line-height: 60px;
				width: 25%;
				color: #666666;
			}
			.mui-input-row label~input{
				height: 55px;
			}
			#login_button{
				line-height: 2;
			}
		</style>

	</head>

	<body>
		<div class="mui-content">
			<div class="login-logo"><h2><img src="../img/logo1.png" width="44px" height="44px"/>北京师范大学</h2><h4>宣城校区</h4></div>
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>地址:</label>
					<input id='address' type="text" class="mui-input-clear mui-input" placeholder="127.0.0.1">
				</div>
				<div class="mui-input-row">
					<label>账号:</label>
					<input name='username' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密码:</label>
					<input name="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<!-- <div class="mui-input-row">
					<label>语音:</label>
					<input type="text" id="speech_input" class="mui-input-clear mui-input" placeholder="语音输入" >
					<input type="hidden" id="speech" >
					<span class="mui-icon mui-icon-speech" id='voice'></span>
					<div class="dialog-container" id='voice3' style="display:none;">
				        <div class="audio-animation">
				            <div id="one"></div>
				            <div id="two"></div>
				            <div id="three"></div>
				            <div id="four"></div>
				        </div>        
				    </div>
				   
				</div> -->
				<div class="mui-content-padded">
				    <!--<button id='voice' type="button" class="mui-btn mui-btn-block">按住 说话</button>-->
				   <!--  <button id='voice3' type="button" class="mui-btn mui-btn-block">播放</button> -->
				</div>
				<div class="mui-content-padded">
					<button id='login_button' type="button" class="mui-btn mui-btn-block">登录</button>
				</div>
				 <!-- 中间黑框 录音状态 
                <div class="blackBoxSpeak">
                    <p class="blackBoxSpeakConent">手指上划，取消</p>
                </div>-->

                <!-- 中间黑框 暂停状态
                <div class="blackBoxPause">
                    <p class="blackBoxPauseContent" style="background: red">松开手指， 取消</p>
                </div> -->
			</form>

		</div>
		<script src="../js/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="../plugin/jqueryValidation/jqueryvalidate.js"></script>
     <script type="text/javascript" src="../plugin/jqueryValidation/messages_zh.js"></script>
		<script src="../js/mui.js"></script>
		<script src="../../script/api.js"></script>
		<script type="text/javascript"></script>
		<script>
			mui('body').on('tap','a',function(){
				window.top.location.href=this.href;
			});
			window.onload=function(){


			$("#login-form").validate();
			$("#login_button").click(function(){
				window.location.href="../../index.html";
				//
				// var params={};
				// params.username=$("input[name='username']").val();
				// params.password=$("input[name='password']").val();
				//
				//  $.ajax({
				//  	type:"post",
				//  	url:ctx+"/sys/login/appLogin",
				//  	data:params,
				//  	dataType:"json",
				//  	success:function(data){
				//
				//  		//跳转到首页
				//  		if (data.msg == 1){
				//  		  	$api.setStorage('username',params.username);//将用户名保存到本地
				//  			window.location.href="index.html";
				//  		}else if(data.msg == 0||data.msg==-1){
				//  			alert('用户名或密码不正确！');
				//  		}else if(data.msg == 2){
				//  			alert('当前用户未分配任何权限！');
				//  		}
				//
				//  	},
                //    	error:function(){
                //         alert("连接不到服务器,请检查网络!!!");
                //     }
				//  })
			})




				// //播放录音
    //             var voice3=document.getElementById("voice3");
				// voice3.onclick=function(){
				//     var path=document.getElementById("speech").value;
    //                 openPlayer(path);
    //             };
            }

            //
            // recordEvent();
            // initRecordEvent();


		</script>

	</body>

</html>
